<template>
    <section class="cricle-content">
        <div v-for="i in list" :key="i.id" @click="fun(i.type)">
            <div v-if="i.top===1">
                <p><span>置顶</span>{{i.text}}</p>
                <div class="Content-list-zan">
                    <div class=" time">{{i.time}}</div>
                    <div class="Content-list">
                        <div class="Content-list-icon"><Icon type="ios-eye" size="25" class="icon" /> <span>{{i.syes}}</span></div>
                        <div class="Content-list-icon"><Icon type="md-images" size="20" class="icom icon"/> <span>{{i.imgNum}}</span></div>
                        <div class="Content-list-icon"><Icon type="md-thumbs-up" size="20" class="icom icon"/> <span>{{i.zan}}</span></div>
                    </div>
                </div>
            </div>
            <div class="top" v-if="i.top===2" :width="width" :height="height"  >
                <img :src="i.userImg" alt="" class="usrImg"  @mouseover="overShow(i.id)" @mouseout="outHide(i.id)" >
                <p>{{i.text}}</p>
                <div class="cricle-img" :style="{'margin-left':width+'px'}">
                    <ul>
                        <li v-for="(y,index) in i.img"  :key='index' :style="{'margin-right':(width-46)+'px'}">
                            <img :src="y" alt="" :style="{'width':width+'px','height':height+'px'}">
                        </li>
                    </ul>
                    <div style="clear: both"></div>
                </div>
                <span><Icon type="ios-pricetags"  size="20" style="margin-right: 10px"/>术后当自强   鼻部   孝感同城   重庆同城   鼻部综合   手术延长鼻小柱   鼻小柱   自体软骨垫鼻尖   鼻头整形   硅胶隆鼻 隆鼻</span>
                <div class="Content-list-zan">
                    <div class=" time">{{i.time}}</div>
                    <div class="Content-list">
                        <div class="Content-list-icon"><Icon type="ios-eye" size="25" class="icon" /> <span>{{i.syes}}</span></div>
                        <div class="Content-list-icon"><Icon type="md-images" size="20" class="icom icon"/> <span>{{i.imgNum}}</span></div>
                        <div class="Content-list-icon"><Icon type="md-thumbs-up" size="20" class="icom icon"/> <span>{{i.zan}}</span></div>
                    </div>
                </div>

                <div class="user-information" :class="{show:item===i.id}">
                 <p><span>SUJINCHOI</span> <img src="../../assets/zuanshi.png" alt=""> <span>1</span> </p>
                    <p>20-25岁海外 韩国</p>
                    <p>我不是代购、个人翻译、医院职 员，请勿扰员thx-u！不太！你有需</p>
                    <div class="buton">
                        <span>+ &nbsp;关注</span>
                        <span><Icon type="ios-mail-outline" size="22" />&nbsp;私信</span>
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center">
            <Page :total="100" />
        </div>
    </section>
</template>

<script>
    export default {
        name: "CricleContent",
        props:["list",'height','width'],
        data () {
            return {
              item : null
            }
        },
        
        methods: {
            overShow (index) {
                this.item= index,
                console.log(index)
            },
            outHide () {
                this.item=null
            },
            fun (index) {
                if(index===1){
                    this.$router.push({path: '/circledelist'})
                }
                if(index===2){
                    this.$router.push({path: '/amandelists'})
                }
                if(index===3){
                    this.$router.push({path: '/circletopicdelist'})
                }


            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../style/style.less";
    .cricle-content{
        margin-bottom: 50px;

        >div:hover{
            cursor: pointer;
        }
        >div{
            padding-top: 20px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e3e3e3;
            .usrImg{
                width: 49px;
                height: 49px;
                border-radius: 50%;
                float: left;
                margin-right: 10px;
                cursor:pointer;
            }
            /*.usrImg:hover .user-information{*/
                /*display: block !important;*/
            /*}*/
        }
        >:last-child{
            border: none;
        }
        .show{
            display: block !important;
        }
        .top{
            position: relative;
           >span{
               color: #ff8ba0;
               font-size: 13px;
               padding-bottom: 5px;
           }
            >.Content-list-zan{
                margin-top: 8px;
            }
            >p{
                height: 38px;
                width:840px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp:2;
                word-break:break-all;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                margin-bottom: 10px;

            }
            .cricle-img{
                margin-top: 20px;
                li{
                    float: left;
                    margin-right: 18px;
                    margin-bottom: 10px;
                }
                img{
                    width: 200px;
                    height: 200px;
                }
            }
        }

        >p{
            color: #66656a;
            font-size: 14px;
            margin-bottom: 20px;

            span{
                background-color: #ff5371;
                border-radius: 2px;
                color: white;
                padding:4px 8px;
            }
            .red{
                color: #ff0000;
            }

        }

        .Content-list-zan{
            height: 30px;
            .Content-list{
                float: right;
                width: 280px;
            }
            .Content-list-icon{
                width: 70px;
                height: 30px;
                line-height: 30px;
                float: left;
                margin-left: 22px;
                span{
                    padding-left: 8px;
                    color: #999999;
                }
            }
            .icom{
                margin-top: -4px;
            }
            .icon{
                color: #999999;
            }
            .time{
                float: left;
                color: #999999;
                width: 150px;
            }
            .Content-list:hover {
                border-bottom: none;
                background-color: #ffffff;
            }
        }

        .user-information{
            display: none;
            position: absolute;
            top: -20px;
            left: 55px;
            width: 264px;
            height: 159px;
            background: url("../../assets/paopao.png");
            padding-left: 40px;
            >p{
                color: #999999;
                font-size: 14px;
                padding-top: 7px;
            }
            >:first-child{
                color:@theme-color-dark;
                width: 100%;
                padding-top: 15px;
                vertical-align: auto;
                font-size: 16px;
            >img{
                width: 21px;
                height: 21px;
                vertical-align: top;
                margin-left: 5px;

            }
                >span{
                    vertical-align: top;
                }
                >:last-child{
                    color: #ffcc33;
                    font-size: 17px;
                    margin-left: -5px;
                }

            }
            >.buton{
                margin-top: 8px;
                padding-left: 20px;

                >span{
                    display: block;
                    width: 70px;
                    height: 24px;
                    background-color: #ff5371;
                    border-radius: 4px;
                    color: white;
                    text-align: center;
                    line-height: 24px;
                    float: left;
                    font-size: 14px;
                    margin-left: 15px;
                }
            }

        }
    }

</style>